<template>
  <div class="container">
    <header class="header">
      <div class="admin">
        <i class="fas fa-user-shield"></i>
        <span>管理员</span>
      </div>
      <el-button type="primary" class="back-button" @click="goBack">
        <i class="fas fa-arrow-left"></i> 返回
      </el-button>
    </header>

    <main class="content">
      <section class="message-id">
        <div class="section-header">
          <i class="fas fa-id-badge"></i>
          <h3>处理人ID：{{ spoID }}</h3>
        </div>
      </section>

      <section class="comment-section">
        <div class="section-header">
          <i class="fas fa-comment"></i>
          <h3>留言内容</h3>
        </div>
        <div class="comment">{{ items.feedback }}</div>
      </section>

      <section class="response-section">
        <div class="section-header">
          <i class="fas fa-reply"></i>
          <h3>管理员回复</h3>
        </div>
        <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入回复内容"
          v-model="responseContent"
          class="response-input"
        ></el-input>
        <div class="button-container">
          <el-button type="primary" class="submit-button" @click="submitResponse">
            <i class="fas fa-paper-plane"></i>
            提交回复
          </el-button>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      backId: "",
      spoID: "",
      items: {
        // feedBack: null,
        // response: null
      },
      responseContent: "", // 管理员回复内容
      sponsorName: "管理员", // 添加回复人姓名
    };
  },
  created() {
    this.backId = this.$route.params.backId;

    // 首先获取 uID
    this.$http
      .get("/getuID")
      .then((response) => {
        console.log("获取到的 uID:", response.data);
        this.spoID = response.data;

        // 然后获取留言详情
        this.$http
          .get("/getBackAndSpo", {
            params: {
              backId: this.backId,
            },
          })
          .then((result) => {
            console.log(result.data);
            this.items = result.data;
          });
      })
      .catch((error) => {
        console.error("获取 uID 失败:", error);
      });
  },
  methods: {
    // 获取当前时间的方法
    getCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    submitResponse() {
      // 如果回复内容为空，提示用户
      if (!this.responseContent.trim()) {
        this.$message.warning("请输入回复内容");
        return;
      }

      // 准备发送到后端的数据
      const feedback = {
        sponsorId: this.spoID, // 对应后端的 spoid
        backId: parseInt(this.backId, 10), // 确保 backID 是整数
        response: this.responseContent,
        resTime: this.getCurrentTime(), // 对应后端的 restime
      };

      this.$http
        .patch("/addResponse", feedback, {
          // 使用 patch 方法
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then((response) => {
          if (response.data > 0) {
            // 假设后端返回大于0表示成功
            this.$message.success("回复提交成功");
            this.$router.go(-1);
          } else {
            this.$message.error("回复提交失败");
          }
        })
        .catch((error) => {
          console.error("提交失败:", error);
          this.$message.error("回复提交失败");
        });
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.container {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.admin {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #606266;
  font-size: 16px;
}

.admin i {
  color: #409EFF;
  font-size: 20px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 20px;
  transition: all 0.3s;
}

.back-button:hover {
  transform: translateX(-2px);
}

.content {
  padding: 24px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.section-header i {
  color: #409EFF;
  font-size: 18px;
}

.section-header h3 {
  margin: 0;
  color: #303133;
  font-size: 18px;
  font-weight: 500;
}

.message-id {
  margin-bottom: 30px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409EFF;
}

.comment-section,
.response-section {
  margin-bottom: 30px;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.comment {
  background-color: #f8f9fa;
  border: 1px solid #e4e7ed;
  padding: 16px;
  border-radius: 8px;
  color: #606266;
  line-height: 1.6;
  font-size: 14px;
  transition: all 0.3s;
}

.comment:hover {
  border-color: #c0c4cc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.response-section {
  display: flex;
  flex-direction: column;
}

.response-input {
  margin-bottom: 16px;
}

.response-input :deep(.el-textarea__inner) {
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  border-color: #e4e7ed;
  transition: all 0.3s;
}

.response-input :deep(.el-textarea__inner:focus) {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64,158,255,0.2);
}

.button-container {
  display: flex;
  justify-content: flex-end;
}

.submit-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 24px;
  font-size: 14px;
  transition: all 0.3s;
}

.submit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(64,158,255,0.3);
}

@media screen and (max-width: 768px) {
  .container {
    padding: 10px;
  }

  .content {
    padding: 16px;
  }

  .header {
    padding: 12px 16px;
  }

  .section-header h3 {
    font-size: 16px;
  }

  .submit-button {
    width: 100%;
    justify-content: center;
  }
}
</style>
